<template>
  <el-container>
    <el-aside width="215px">
      <el-menu default-active="2" class="daohanglan" background-color="#2D373F" text-color="#000" :router="true"
        :default-openeds="openList">
        <div class="box1">
          <p>
            <span>乡镇数字平台-后台管理</span>
          </p>
        </div>
        <el-menu-item index="/Shouye">
          <i class="el-icon-setting"></i>
          <span slot="title" class="box12">首页</span>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">基础数据管理</span>
          </template>
          <el-menu-item index="/Personnelinfo" style=" color: #fff;">乡镇信息管理</el-menu-item>
          <el-menu-item index="/Gisdingwei" style=" color: #fff;">乡镇信息GIS定位</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">招商管理</span>
          </template>
          <el-menu-item index="/InvestmentPolicy" style=" color: #fff;">招商政策管理</el-menu-item>
          <el-menu-item index="/InvestmentProcess" style=" color: #fff;">招商流程管理</el-menu-item>
          <el-menu-item index="/InvestmentAdvisory" style=" color: #fff;">招商咨询管理</el-menu-item>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">献言献策</span>
          </template>
          <el-menu-item index="/Advice" style=" color: #fff;">献言献策</el-menu-item>
          <el-menu-item index="/Fankui" style=" color: #fff;">在线反馈</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">风采展示</span>
          </template>
          <el-menu-item index="/StyleShow" style=" color: #fff;">风采展示内容</el-menu-item>
          <el-menu-item index="/VolunteerService" style=" color: #fff;">乡贤志愿</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">家乡风貌</span>
          </template>
          <el-menu-item index="/HomeStyle" style=" color: #fff;">"家乡风貌"后台管理</el-menu-item>
          <el-menu-item index="/CommentEvaluation" style=" color: #fff;">留言评价</el-menu-item>

        </el-submenu>
        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">参与治理</span>
          </template>
          <el-menu-item index="/Activities" style=" color: #fff;">专题活动管理</el-menu-item>
          <el-menu-item index="/Sodality" style=" color: #fff;">乡贤联谊会管理</el-menu-item>
          <el-menu-item index="/Indexx" style=" color: #fff;">在线互动</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <el-menu mode="horizontal" background-color="#000" text-color="#fff" active-text-color="#ffd04b" :router="true">
          <div style="float: right; height: 60px">
            <!-- <el-input class="input" placeholder="请输入查询编号" clearable>
              <el-button
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input> -->

            <el-popover placement="top" width="200" v-model="visible">
              <p style="font-size: 20px">退出系统</p>
              <p style="font-size: 17px">请确认是否退出系统？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="medium" style="border: #409eff 1px solid; width: 80px" type="text"
                  @click="visible = false">取消</el-button>
                <el-button type="primary" style="width: 80px" size="medium" @click="tuichu">退出</el-button>
              </div>
              <i class="el-icon-switch-button" slot="reference"></i>
            </el-popover>
            <span class="yhzw">用户</span>
          </div>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      openList: ["1"],
      visible: false,
    };
  },
  methods: {
    tuichu() {
      localStorage.removeItem("user")
      localStorage.removeItem("token")
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style scoped>
.el-header {
  padding: 0px 0px 0 0;
}

.daohanglan {
  width: 215px;
  border: none;
}

.box1 {
  height: 50px;
  margin-top: 20px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}

.box11 {
  color: #fff;
  padding: 0 60px 0 0;
}

.box12 {
  color: #fff;
  padding: 0 85px 0 0;
}

.el-submenu {
  margin: 8px;
}

.el-main {
  padding: 0px 0px 0px 0px;
}

.el-menu.el-menu--horizontal {
  border: none;
}

.el-icon-switch-button {
  font-size: 20px;
  color: #fff;
  margin: 20px 30px 0 0;
  cursor: pointer;
}

.yhzw {
  font-size: 17px;
  margin: 0px 40px 0 0;
  color: #fff;
}

.input {
  position: absolute;
  left: 150px;
  top: 10px;
  width: 300px;
  border-radius: 20px;
}
</style>